﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职称设置</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <style>
        .txt_bg {
            background-color: #FFD553;
        }

        #app table tr td {
            border: 1px solid #000000;
            margin: 3px;
        }

        body {
            background-color: #FFFFCC;
        }

        td {
            padding: 3px;
        }

        .txt_bg {
            background-color: #FFD553;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 228px;
            height: 228px;
            line-height: 228px;
            text-align: center;
        }

        .avatar {
            width: 228px;
            height: 228px;
            display: block;
        }

    </style>
</head>
<body>
    <div id="app">

        <div>您正在做的业务是：人力资源--招聘管理--简历管理--简历登记</div>
        <div>
            <form>
                <input type="button" value="提交" v-on:click="Tj" />
                <table>
                    <tr>
                        <td width="90px" class="txt_bg">职位</td>
                        <td width="150px" colspan="3">
                            <el-cascader v-model="selectedOrg"
                                         :options="orgOptions"
                                         :props="cascaderProps"
                                         placeholder="请选择职位分类"
                                         clearable
                                         v-on:change="handleOrgChange"
                                         class="w-full"
                                         style="width: 100%;">
                            </el-cascader>
                        </td>
                        <td width="90px" class="txt_bg">招聘类型</td>
                        <td width="140px">
                            <el-select v-model="value1"
                                       placeholder="请选择"
                                       size="large"
                                       style="width: 150px">
                                <el-option v-for="item in options1"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value" />
                            </el-select>
                        </td>
                        <td colspan="2" rowspan="6">
                            <!-- 头像 -->
                            <el-upload class="avatar-uploader"
                                       ref="upload"
                                       action="/ER_Add/WJSC"
                                       :show-file-list="false"
                                       :on-success="handleAvatarSuccess"
                                       :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </td>
                    </tr>
                    <tr>
                        <td class="txt_bg">姓名</td>
                        <td><el-input v-model="formData.HumanName" placeholder="请输入姓名"></el-input></td>
                        <td class="txt_bg">性别</td>
                        <td>
                            <el-select v-model="value2"
                                       placeholder="请选择"
                                       size="large"
                                       style="width: 150px">
                                <el-option v-for="item in options2"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value" />
                            </el-select>
                        </td>
                        <td class="txt_bg">EMAIL</td>
                        <td><el-input v-model="formData.HumanEmail" placeholder="请输入邮箱"></el-input></td>
                    </tr>
                    <tr>
                        <td class="txt_bg">电话</td>
                        <td><el-input v-model="formData.HumanTelephone" placeholder="请输入电话"></el-input></td>
                        <td width="90px" class="txt_bg">家庭电话</td>
                        <td><el-input v-model="formData.HumanHomephone" placeholder="请输入家庭电话"></el-input></td>
                        <td class="txt_bg">手机</td>
                        <td><el-input v-model="formData.HumanMobilephone" placeholder="请输入手机"></el-input></td>
                    </tr>
                    <tr>
                        <td class="txt_bg">住址</td>
                        <td colspan="3"><el-input v-model="formData.HumanAddress" placeholder="请输入住址"></el-input></td>
                        <td class="txt_bg">邮编</td>
                        <td><el-input v-model="formData.HumanPostcode" placeholder="请输入邮编"></el-input></td>
                    </tr>
                    <tr>
                        <td class="txt_bg">国籍</td>
                        <td>
                            <el-select v-model="value3"
                                       placeholder="请选择"
                                       size="large"
                                       style="width: 150px">
                                <el-option v-for="item in options3"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value" />
                            </el-select>
                        </td>
                        <td class="txt_bg">出生地</td>
                        <td><el-input v-model="formData.HumanBirthplace" placeholder="请输入出生地"></el-input></td>
                        <td class="txt_bg">生日</td>
                        <td><el-date-picker v-model="formData.HumanBirthday" type="date" placeholder="请选择日期"></el-date-picker></td>
                    </tr>
                    <tr>
                        <td class="txt_bg">民族</td>
                        <td>
                            <el-select v-model="value4"
                                       placeholder="请选择"
                                       size="large"
                                       style="width: 150px">
                                <el-option v-for="item in options4"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value" />
                            </el-select>
                        </td>
                        <td class="txt_bg">宗教信仰</td>
                        <td>
                            <el-select v-model="value5"
                                       placeholder="请选择"
                                       size="large"
                                       style="width: 150px">
                                <el-option v-for="item in options5"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value" />
                            </el-select>
                        </td>
                        <td class="txt_bg">政治面貌</td>
                        <td>
                            <el-select v-model="value6"
                                       placeholder="请选择"
                                       size="large"
                                       style="width: 150px">
                                <el-option v-for="item in options6"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value" />
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td class="txt_bg">身份证号码</td>
                        <td><el-input v-model="formData.HumanIdcard" placeholder="请输入身份证号码" v-on:blur="parseIdCard"></el-input></td>
                        <td class="txt_bg">年龄</td>
                        <td><el-input v-model="formData.HumanAge" placeholder="请输入年龄" disabled></el-input></td>
                        <td class="txt_bg">毕业院校</td>
                        <td><el-input v-model="formData.HumanCollege" placeholder="请输入毕业院校"></el-input></td>
                        <td class="txt_bg">学历</td>
                        <td>
                            <el-select v-model="value9"
                                       placeholder="请选择"
                                       size="large"
                                       style="width: 150px">
                                <el-option v-for="item in options9"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value" />
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td class="txt_bg">教育年限</td>
                        <td>
                            <el-select v-model="value8"
                                       placeholder="请选择"
                                       size="large"
                                       style="width: 150px">
                                <el-option v-for="item in options8"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value" />
                            </el-select>
                        </td>
                        <td class="txt_bg">学历专业</td>
                        <td>
                            <el-select v-model="value10"
                                       placeholder="请选择"
                                       size="large"
                                       style="width: 150px">
                                <el-option v-for="item in options10"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value" />
                            </el-select>
                        </td>
                        <td class="txt_bg">薪酬要求</td>
                        <td><el-input v-model="formData.DemandSalaryStandard" placeholder="请输入薪酬要求"></el-input></td>
                        <td class="txt_bg">注册时间</td>
                        <td>
                            <el-input type="text" v-model="formData.RegisterTime" name="RegistTime" disabled />
                        </td>
                    </tr>
                    <tr>
                        <td class="txt_bg">特长</td>
                        <td>
                            <el-select v-model="value11"
                                       placeholder="请选择"
                                       size="large"
                                       style="width: 150px">
                                <el-option v-for="item in options11"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value" />
                            </el-select>
                        </td>
                        <td class="txt_bg">爱好</td>
                        <td>
                            <el-select v-model="value7"
                                       placeholder="请选择"
                                       size="large"
                                       style="width: 150px">
                                <el-option v-for="item in options7"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value" />
                            </el-select>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td class="txt_bg">个人履历</td>
                        <td colspan="7">
                            <el-input v-model="formData.HumanHistoryRecords" type="textarea" :rows="3" placeholder="请输入个人履历"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td class="txt_bg">备注</td>
                        <td colspan="7">
                            <el-input v-model="formData.Remark" type="textarea" :rows="3" placeholder="请输入备注"></el-input>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <script>
        const { createApp, ref, reactive, onMounted } = Vue;
        const app = createApp({
            setup() {
                // 表单数据
                const formData = reactive({
                    HumanName: '',//姓名
                    HumanEmail: '',//email
                    HumanTelephone: '',//电话号码
                    HumanHomephone: '',//家庭电话
                    HumanMobilephone: '',//手机
                    HumanAddress: '',//地址
                    HumanPostcode: '',//邮编
                    HumanBirthplace: '',//出生地
                    HumanBirthday: '',//生日
                    HumanIdcard: '',//身份证号码
                    HumanAge: '',//年龄
                    HumanCollege: '',//毕业院校
                    DemandSalaryStandard: '',//薪酬要求
                    RegisterTime: '',//注册时间
                    HumanHistoryRecords: '',//个人履历
                    Remark: '',//备注
                    HumanMajorKindId: '',//职位分类编号
                    HumanMajorKindName: '',//职位分类名称
                    HumanMajorId: '',//职位编号
                    HunmaMajorName: '',//职位名称
                });

                // 从Element Plus中解构出Message组件
                const { ElMessage } = ElementPlus;

                // 下拉框数据
                const value1 = ref();//招聘类型
                const options1 = [
                    {
                        value: "校园招聘",
                        label: "校园招聘"
                    },
                    {
                        value: "社会招聘",
                        label: "社会招聘"
                    }
                ];

                const value2 = ref();//性别
                const options2 = [
                    {
                        value: "男",
                        label: "男"
                    },
                    {
                        value: "女",
                        label: "女"
                    }
                ];

                const value3 = ref();//国籍
                const options3 = [
                    {
                        value: "中国",
                        label: "中国"
                    },
                    {
                        value: "美国",
                        label: "美国"
                    }
                ];

                const value4 = ref();//民族
                const options4 = [
                    {
                        value: "汉族",
                        label: "汉族"
                    },
                    {
                        value: "回族",
                        label: "回族"
                    }
                ];

                const value5 = ref();//宗教信仰
                const options5 = [
                    {
                        value: "无",
                        label: "无"
                    },
                    {
                        value: "佛教",
                        label: "佛教"
                    }
                ];

                const value6 = ref();//政治面貌
                const options6 = [
                    {
                        value: "党员",
                        label: "党员"
                    },
                    {
                        value: "群众",
                        label: "群众"
                    }
                ];

                const value7 = ref();//爱好
                const options7 = [
                    {
                        value: "篮球",
                        label: "篮球"
                    },
                    {
                        value: "舞蹈",
                        label: "舞蹈"
                    }
                ];

                const value8 = ref();//教育年限
                const options8 = [
                    {
                        value: "12",
                        label: "12"
                    },
                    {
                        value: "16",
                        label: "16"
                    }
                ];

                const value9 = ref();//学历
                const options9 = [
                    {
                        value: "本科",
                        label: "本科"
                    },
                    {
                        value: "大专",
                        label: "大专"
                    }
                ];

                const value10 = ref();//学历专业
                const options10 = [
                    {
                        value: "生物工程",
                        label: "生物工程"
                    },
                    {
                        value: "计算机",
                        label: "计算机"
                    }
                ];

                const value11 = ref();//特长
                const options11 = [
                    {
                        value: "数据库",
                        label: "数据库"
                    },
                    {
                        value: "java",
                        label: "java"
                    }
                ];

                // 图片上传相关
                const imageUrl = ref('');
                const img = ref('')
                const fileList = ref([]);

                function Tj(){
                    axios.get("/ER_Add/Add",{
                        params:{
                            HumanName:formData.HumanName ,//姓名
                            HumanEmail:formData.HumanEmail,//email
                            HumanTelephone: formData.HumanTelephone,//电话号码
                            HumanHomephone:formData.HumanHomephone ,//家庭电话
                            HumanMobilephone: formData.HumanMobilephone,//手机
                            HumanAddress:formData.HumanAddress ,//地址
                            HumanPostcode: formData.HumanPostcode,//邮编
                            HumanBirthplace: formData.HumanBirthplace,//出生地
                            HumanBirthday:formData.HumanBirthday ,//生日
                            HumanIdcard:formData.HumanIdcard,//身份证号码
                            HumanAge: formData.HumanAge,//年龄
                            HumanCollege:formData.HumanCollege ,//毕业院校
                            DemandSalaryStandard:formData.DemandSalaryStandard ,//薪酬要求
                            RegisterTime: formData.RegisterTime,//注册时间
                            HumanHistoryRecords: formData.HumanHistoryRecords,//个人履历
                            Remark: formData.Remark,//备注
                            HumanMajorKindId:formData.HumanMajorKindId ,//职位分类编号
                            HumanMajorKindName: formData.HumanMajorKindName,//职位分类名称
                            HumanMajorId:formData.HumanMajorId ,//职位编号
                            HunmaMajorName: formData.HunmaMajorName,//职位名称
                            value1:value1.value,
                            value2:value2.value,
                            value3:value3.value,
                            value4:value4.value,
                            value5:value5.value,
                            value6:value6.value,
                            value7:value7.value,
                            value8:value8.value,
                            value9:value9.value,
                            value10:value10.value,
                            value11:value11.value,
                            image:img.value
                        }
                    })
                    .then(res=>{
                        if(res.data.zhi=="ok"){
                            ElementPlus.ElMessage.success('添加成功');
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })

                }

                // 职位分类选择相关
                const selectedOrg = ref([]);
                const orgOptions = ref([]);

                const cascaderProps = ref({
                    expandTrigger: 'click',
                    value: 'id',
                    label: 'name',
                    children: 'children',
                    checkStrictly: false
                });

                // 获取职位
                const fetchOrgData = async () => {
                    try {
                        const response = await axios.get('/FirstLevel2');
                        orgOptions.value = response.data;
                        console.log(response.data);

                        // 检查URL参数并自动选择相应职位
                        const urlParams = new URLSearchParams(window.location.search);
                        const majorKindId = urlParams.get('major_kind_id');
                        console.log(majorKindId)
                        const majorId = urlParams.get('major_id')+" ";
                        console.log(majorId)
                        //console.info(selectedOrg.value);
                        //selectedOrg.value = [majorKindId, majorId+" "];
                        //console.info(selectedOrg.value);
                        selectOrgById(majorKindId, majorId)
                    } catch (error) {
                        console.error('获取机构数据失败:', error);
                        // 使用Element Plus的Message组件
                        ElMessage.error('获取机构数据失败，请重试');
                    }
                };

                // 处理头像上传成功
                const handleAvatarSuccess = (response, file) => {
                    img.value = response
                    // 假设服务器返回的是图片URL
                    if (response && response.paths && response.paths.length > 0) {
                        // 使用服务器返回的相对路径构建完整URL
                        const baseUrl = window.location.origin;
                        imageUrl.value = `${baseUrl}/${response.paths[0]}`;

                    } else {
                        // 备用方案：使用本地预览
                        imageUrl.value = URL.createObjectURL(file.raw);
                        console.log(imageUrl.value)
                        console.log('图片上传成功，但未获取到服务器URL，使用本地预览')

                    }
                };

                // 上传前验证 - 支持PNG和JPG
                const beforeAvatarUpload = (file) => {
                    // 允许JPG和PNG格式
                    const isJPG = file.type === 'image/jpeg';
                    const isPNG = file.type === 'image/png';
                    const isAllowedType = isJPG || isPNG;

                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isAllowedType) {
                        Message.error('上传头像图片只能是 JPG 或 PNG 格式!');
                    }

                    if (!isLt2M) {
                        Message.error('上传头像图片大小不能超过 2MB!');
                    }

                    return isAllowedType && isLt2M;
                };

                const firstKindName = ref('');
                const secondKindName = ref('');

                // 处理级联选择变化
                const handleOrgChange = (value) => {
                    console.log('选中的职位ID:', value);

                    // 清空名称
                    firstKindName.value = '';
                    secondKindName.value = '';

                    const firstId = value[0];
                    const secondId = value[1];

                    // 获取I级名称
                    if (firstId) {
                        const firstItem = orgOptions.value.find(item => item.id === firstId);
                        firstKindName.value = firstItem?.name || '';
                        console.log("职位分类名称: " + firstKindName.value);
                    }

                    // 获取II级名称
                    if (firstId && secondId) {
                        const firstItem = orgOptions.value.find(item => item.id === firstId);
                        if (firstItem && firstItem.children) {
                            const secondItem = firstItem.children.find(item => item.id === secondId);
                            secondKindName.value = secondItem?.name || '';
                            console.log("职位名称: " + secondKindName.value);
                        }
                    }

                    formData.HumanMajorKindId = value[0]//职位分类编号
                    formData.HumanMajorKindName = firstKindName.value//职位分类名称
                    formData.HumanMajorId = value[1]//职位编号
                    formData.HunmaMajorName = secondKindName.value//职位名称
                };

                // 根据ID选择级联数据
                const selectOrgById = (firstId, secondId) => {
                    // firstId = firstId+" ";
                    // secondId = secondId+" ";
                    if (!orgOptions.value || orgOptions.value.length === 0) {
                        ElMessage.error('职位数据未加载完成，请稍后再试');
                        return;
                    }

                    // 检查一级分类ID是否有效
                    const firstItem = orgOptions.value.find(item => item.id === firstId);
                    if (!firstItem) {
                        ElMessage.error(`未找到ID为 ${firstId} 的一级分类`);
                        return;
                    }

                    // 检查二级分类ID是否有效
                    if (!firstItem.children || firstItem.children.length === 0) {
                        ElMessage.error(`一级分类 "${firstItem.name}" 没有子分类`);
                        return;
                    }

                    const secondItem = firstItem.children.find(item => item.id === secondId);
                    if (!secondItem) {
                        ElMessage.error(`未找到ID为 ${secondId} 的二级分类`);
                        return;
                    }

                    // 设置级联选择器的值
                    selectedOrg.value = [firstId, secondId];

                    // 触发级联选择变化事件
                    handleOrgChange(selectedOrg.value);

                    // ElMessage.success(`已选择: ${firstItem.name} - ${secondItem.name}`);
                };

                const tm = ref('')
                //当前时间
                function updateTime() {
                    const now = new Date();

                    // 格式化日期时间
                    const year = now.getFullYear();
                    const month = String(now.getMonth() + 1).padStart(2, '0');
                    const day = String(now.getDate()).padStart(2, '0');
                    const hours = String(now.getHours()).padStart(2, '0');
                    const minutes = String(now.getMinutes()).padStart(2, '0');
                    const seconds = String(now.getSeconds()).padStart(2, '0');
                    formData.RegisterTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                }

                // 解析身份证号码
                const parseIdCard = () => {
                    const idCard = formData.HumanIdcard.trim();

                    // 验证身份证格式
                    if (!idCard) {
                        ElMessage.warning('请输入身份证号码');
                        return;
                    }

                    // 18位身份证正则表达式
                    const idCardPattern = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

                    if (!idCardPattern.test(idCard)) {
                        ElMessage.error('请输入有效的18位身份证号码');
                        return;
                    }

                    try {
                        // 提取出生日期 (格式: YYYYMMDD)
                        const birthDateStr = idCard.substring(6, 14);
                        const year = parseInt(birthDateStr.substring(0, 4));
                        const month = parseInt(birthDateStr.substring(4, 6)) - 1; // JavaScript月份从0开始
                        const day = parseInt(birthDateStr.substring(6, 8));

                        // 计算年龄
                        const today = new Date();
                        let age = today.getFullYear() - year;

                        // 检查是否已经过了生日
                        if (today.getMonth() < month || (today.getMonth() === month && today.getDate() < day)) {
                            age--;
                        }

                        // 提取性别 (第17位奇数为男，偶数为女)
                        const genderCode = parseInt(idCard.charAt(16));
                        const gender = genderCode % 2 === 1 ? "男" : "女";

                        // 格式化出生日期为 YYYY-MM-DD
                        const formattedBirthDate = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;

                        // 更新表单数据
                        formData.HumanBirthday = formattedBirthDate;
                        formData.HumanAge = age.toString();

                        // 更新性别选择
                        value2.value = gender;

                        ElMessage.success('身份证信息已自动填充');
                    } catch (error) {
                        console.error('解析身份证失败:', error);
                        ElMessage.error('解析身份证信息失败，请手动填写');
                    }
                };

                // 立即更新一次时间
                updateTime();
                // 每秒更新一次
                setInterval(updateTime, 1000);

                // 初始化
                onMounted(() => {
                    fetchOrgData();
                });

                return {
                    formData,
                    value1,
                    value2,
                    value3,
                    value4,
                    value5,
                    value6,
                    value7,
                    value8,
                    value9,
                    value10,
                    value11,
                    options1,
                    options2,
                    options3,
                    options4,
                    options5,
                    options6,
                    options7,
                    options8,
                    options9,
                    options10,
                    options11,
                    selectedOrg,
                    cascaderProps,
                    orgOptions,
                    imageUrl,
                    fileList,
                    handleAvatarSuccess,
                    beforeAvatarUpload,
                    handleOrgChange,
                    tm,
                    Tj,
                    selectOrgById,
                    parseIdCard
                };
            }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>